<template>
  <div class="station-container">
    <div class="profile-container">
      <user-profile :userInfo="userInfo" />
      <station-profile
        :stationInfo="stationInfo"
        :warningRecord="warningRecord"
      />
    </div>
    <div class="chart-table-container">
      <div class="charts-wrapper-b flex-container">
        <StatChart Id="station-stat-chart" :option="statOption" />
      </div>
      <div class="lists-wrapper-m flex-container">
        <List title="触发报警排名" :values="warningRank" />
        <List title="连接次数排名" :values="connectRank" />
        <List title="放电量排名" :values="dischargeRank" />
      </div>
      <div class="slave-table-wrapper box-shadow-templat">
        <span class="table-head">下级从属列表</span>
        <el-input
          v-model="searchContent"
          size="mini"
          @input="change($event)"
          placeholder="搜索"
          class="search"
        ></el-input>
        <div class="table-container e">
        <el-table
          :data="getPageData()"
          :row-style="table - row"
          :header-cell-style="tableHeaderColor"
          ref="multipleTable"
        >
          <el-table-column label="名称" align="center" width="220">
            <template slot-scope="scope">
              <div class="name-wrapper">
                <v-gravatar
                  :email="`${scope.row.name}@dazto.com`"
                  hostname="gravatar.zeruns.tech"
                />
                <div class="name">
                  <div class="content" :class="scope.row.status">
                    {{ scope.row.name }}
                  </div>
                  <div class="status gray-text">{{ scope.row.status }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" align="center" width="110">
          </el-table-column>
          <el-table-column
            prop="administrator"
            label="管理员"
            align="center"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="duration"
            label="运行时长"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="online"
            label="上次上线时间"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="warning"
            label="待处理报警"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="left"
            label="当前电量"
            align="center"
            width="120"
            ><template slot-scope="scope">
              <div class="progress" :class="{ low: scope.row.left < 50 }">
                <div class="progress-bg">
                  <div
                    class="progress-value"
                    :style="`width: ${scope.row.left}%`"
                  ></div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @current-change="current_change"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pageSize"
        :total="slaveTable.length"
        layout="total, sizes, prev, pager, next, jumper"
        background
      >
      </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Chart from "@/components/Chart";
import List from "@/components/List";
import StatChart from "@/components/Station/StatChart.vue";
import UserProfile from "@/components/Station/UserProfile.vue";
import StationProfile from "@/components/Station/StationProfile.vue";
import {
  StationStatOption,
} from "@/utils/chartOpt";
import {
  getStatData,
  getWarningRank,
  getConnectRank,
  getDisChargeRank,
  getUserInfo,
  getStationInfo,
  getSlaveTable,
  getWarningRecord,
  getConnectRecord,
  getCollectRecord,
} from "@/api/station";

export default {
  name: "Station",
  components: {
    Chart,
    List,
    StatChart,
    UserProfile,
    StationProfile,
  },
  data() {
    return {
      chargeOption: {},
      batteryOption: {},
      statOption: {},
      warningRank: [],
      connectRank: [],
      dischargeRank: [],
      userInfo: {},
      stationInfo: {},
      slaveTitle: "",
      slaveTable: [],
      warningRecord: [],
      pageSize: 3, //每页的数据条数
      currentPage: 1, //默认开始页面
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {

      getStatData().then((res) => {
        this.statOption = StationStatOption(res.data);
      });

      getWarningRank().then((res) => {
        this.warningRank = res.data;
      });

      getConnectRank().then((res) => {
        this.connectRank = res.data;
      });

      getDisChargeRank().then((res) => {
        this.dischargeRank = res.data;
      });

      getUserInfo().then((res) => {
        this.userInfo = res.data;
      });

      getStationInfo().then((res) => {
        this.stationInfo = res.data;
      });

      getWarningRecord().then((res) => {
        this.warningRecord = res.data;
      });

      getSlaveTable().then((res) => {
        this.slaveTitle = res.title;
        this.slaveTable = res.data;
      });

      getConnectRecord().then((res) => {
        this.connectRecord = res.data;
      });

      getCollectRecord().then((res) => {
        this.collectRecord = res.data;
      });
    },
    getPageData() {
      var input = this.searchContent && this.searchContent.toLowerCase();
      var items = this.slaveTable;
      var items1;
      if (input) {
        items1 = items.filter(function (item) {
          return Object.keys(item).some(function (key1) {
            return String(item[key1]).toLowerCase().match(input);
          });
        });
        items1 = items1.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
      } else {
        items1 = items.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
      }
      return items1;
    },
    change(e) {
      this.$forceUpdate();
    },
    //翻页
    current_change: function (currentPage) {
      this.currentPage = currentPage;
    },
    // 每页多少条
    handleSizeChange: function (val) {
      this.pageSize = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.station-container {
  display: flex;
  margin: 15px 15px;
}

.chart-table-container {
  width: calc(100% - 385px);
  display: inline-block;
  vertical-align: top;
  .chart-template {
    height: 300px;
  }
}

.flex-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.charts-wrapper-b {
  width: 100%;
}
.charts-wrapper-m .chart-template {
  width: 49.5%;
}
.charts-wrapper-s {
  width: 39%;
}
.lists-wrapper-m .list-template {
  width: 33%;
  margin-top: 15px;
}
.lists-wrapper-s {
  width: 29.5%;
}

.slave-table-wrapper {
  margin-top: 15px;
  background: white;
  padding: 15px;
  border-radius: 15px;
  width: 100%;
  .table-head {
    font-size: 17px;
    font-weight: bold;
    color: #2c3653;
    margin-bottom: 5px;
    padding-left: 5px;
  }
  .search {
    width: 300px;
    margin-left: 20px;
  }
  .name-wrapper {
    width: 220px;
    text-align: left;
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 10px;
    }
    .name {
      margin-left: 15px;
      .status {
        margin-top: 5px;
      }
      .content {
        position: relative;
        line-height: 20px;
        &::after {
          position: absolute;
          content: "";
          top: 5px;
          right: -15px;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #009d63;
        }
        &.offline::after {
          background: #f96e5b;
        }
      }
    }
  }
  .progress {
    width: 120px;
    .progress-bg {
      position: relative;
      width: 95%;
      height: 5px;
      background: rgba(0, 157, 99, 0.2);
      border-radius: 5px;
    }
    .progress-value {
      position: absolute;
      left: 0;
      top: 0;
      height: 5px;
      background: #009d63;
      border-radius: 5px;
    }
  }

  .progress.low {
    .progress-bg {
      background: rgba(249, 110, 91, 0.2);
    }
    .progress-value {
      background: #f96e5b;
    }
  }
  .table-row {
    margin: 10px 0;
    padding: 10px;
    display: flex;
    align-items: center;
    text-align: center;
    border-radius: 15px;
    color: #959aa9;
    .delivered,
    .pending {
      color: #959aa9;
    }
  }
}

.profile-container {
  display: flex;
  flex-direction: column;
}
</style>
